<script>
import { defineComponent, ref } from 'vue';
import { useDraggable, onClickOutside } from '@vueuse/core';

import {
  More,
  ArrowDown,
  ArrowUp
} from "@element-plus/icons-vue";
export default defineComponent({
  name: "SupermapDynamicCard",
  components: {},
  props: {
    /**
     * 标题
    */
    title: {
      type: String,
      default: ''
    },
    /**
     * left 偏移
    */
    posX: {
      type: Number,
      default: 0
    },
    /**
     * top 偏移
    */
    posY: {
      type: Number,
      default: 0
    },
    /**
     * 是否展示 header 的操作方法
    */
    showHeaderFunction: {
      type: Boolean,
      default: true
    },
    /**
     * 左右分布的时候是居左还是居右
    */
    distributionSide: {
      type: String,
      default: '',
      validator(v) {
        return ['left', 'right', ''].includes(v)
      }
    },
    /**
     * 左右两侧的分布表示的各种方法
    */
    sideFunctions: {
      type: Array,
      default() { return [] }
    },
    /**
     * 定位方式
    */
    position: {
      type: String,
      default() { return 'absolute' }
    }

  },
  setup(props, { emit }) {
    let dragConfig = {
      style: {
        left: `${props.posX}px`,
        top: `${props.posY}px`,
        position: `${props.position}`,
      }
    };
    return dragConfig
  },
  data() {
    return {
      More,
      ArrowDown,
      ArrowUp,
      showMain: true,

    }
  },
  mounted() {
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    emitSideFunc(v) {
      this.$emit('emitSideFunc', v);
      switch (v.key) {
        case 'tunnel-check':
          break;
        default:
      }
    }
  }
})
</script>

<template>
  <div class="supermap-dynamic-card-wrapper" :style="style">
    <div class="supermap-dynamic-card-inner">
      <header>
        <div class="drag-area" :class="{ 'normal': !showMain, 'should-drag': $props.shouldDrag }">
          <div class="title" ref="elDraggableContainer">
            <div class="inner"><span class="">{{ $props.title }}</span></div>
          </div>
          <div class="function-area" v-if="showHeaderFunction">
            <el-button link :icon="showMain ? ArrowDown : ArrowUp" circle @click="showMain = !showMain"></el-button>
          </div>
        </div>
      </header>
      <Transition name="fade">
        <main v-show="showMain">
          <slot></slot>
        </main>
      </Transition>
      <footer></footer>
      <div v-if="sideFunctions.length" class="side-function-area" :class="[
        distributionSide
      ]">
        <div class="block-border" :class="[
          item.active ? 'active' : ''
        ]" @click="emitSideFunc(item)" v-for="(item, index) in sideFunctions" :key="index">
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@color-base-blue: rgb(42, 76, 227);
@color-note: rgb(0, 255, 255);
@border-radius: 3px;
@width-corner: 15px;
@width-side: -110px;

.supermap-dynamic-card-wrapper {
  --wrapper-width: 350px;
  width: var(--wrapper-width);
  pointer-events: all;
  transition-property: transform, opacity;
  transition-duration: .5s, 1s;
  // background-color: rgba(0, 0, 0, 0.5);
}

.supermap-dynamic-card-wrapper header {
  // background-image: url(./images/title-main-header.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;

  // &:before {
  //   content: " ";
  //   position: absolute;
  //   top: -3px;
  //   left: -3px;
  //   width: 45px;
  //   height: 23px;
  //   background-image: url(@/assets/images/icon-top-left.png);
  // }

  // &:after {
  //   content: " ";
  //   position: absolute;
  //   top: -3px;
  //   right: -3px;
  //   width: 45px;
  //   height: 23px;
  //   background-image: url(@/assets/images/icon-top-right.png);
  // }
}

.supermap-dynamic-card-inner {
  position: relative;
  background-color: rgba(25, 40, 58, 0.8);
  & > main {
    // background-color: rgba(0,0,0,0.5);
    padding-top: 10px;
  }

  // &:before {
  //   content: " ";
  //   position: absolute;
  //   bottom: -3px;
  //   left: -3px;
  //   width: 45px;
  //   height: 23px;
  //   background-image: url(@/assets/images/icon-bottom-left.png);
  // }

  // &:after {
  //   content: " ";
  //   position: absolute;
  //   bottom: -3px;
  //   right: -3px;
  //   width: 45px;
  //   height: 23px;
  //   background-image: url(@/assets/images/icon-bottom-right.png);
  // }
}

.drag-area {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  line-height: 40px;
  background-size: 100%;
  background-repeat: no-repeat;

  &.normal {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  &>.title {
    color: #fff;
    flex: 1;
    user-select: none;
    padding-left: 10px;

    &>.inner {
      position: relative;
      font-size: 17px;
      // font-style: oblique;
      color: #ffda1b;
      border-bottom: 2px solid #ffda1b;
    }
  }

  &.should-drag>.title {
    cursor: move;
  }

  &>.function-area {
    width: 30px;
    text-align: center;
  }
}

.side-function-area {
  position: absolute;
  width: calc(-1 * @width-side);
  height: 100px;
  top: 0;
  text-align: center;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
}

.side-function-area>.block-border {
  border-top: none;
  transition: color .3s;
  transform: skew(-15deg);
  border: 1px solid;
  border-left-width: 3px;
  border-bottom-width: 1px;
  border-image: linear-gradient(to right, rgba(184, 255, 77, 1), transparent);
  border-image-slice: 1 1 1 1;
  background-image: linear-gradient(to right, #3c50b4, transparent);
  border-right: none;
  border-top: none;
  margin-bottom: 5px;

  &:hover,
  &.active {
    color: #daa520;
  }
}

.side-function-area.left {
  // 取相反数
  right: @width-side - 10px;
}

.side-function-area.right {
  left: @width-side - 10px;
}
</style>